<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用PubSub.JS组建之间通信</title>
</head>
<body>
<div id="app"></div>
<script src="../../lib/js/react.development.js"></script>
<script src="../../lib/js/react-dom.development.js"></script>
<script src="../../lib/js/babel.min.js"></script>
<script type="text/javascript" src="../../lib/js/prop-types.js"></script>
<script type="text/javascript" src="../../lib/js/pubsub.js"></script>
<script type="text/babel">

    // https://github.com/mroderick/PubSubJS
    class App extends React.Component {
        constructor(props) {
            super(props)
        }

        render() {
            return (
                <div>
                    <h1>todo list</h1>
                    <Add />
                    <List />
                </div>
            )
        }
    }

    class Add extends React.Component {
        constructor(props) {
            super(props)
            this.add = this.add.bind(this)
            this.state = {
                count: 0
            }
        }

        componentDidMount() {
            // 订阅收到的消息
            PubSub.subscribe('SEND_COUNT', (msg, data)  =>  {
                console.log(`Add收到：${data}`)
                this.setState({
                    count: parseInt(data)
                })
            })
        }

        add() {
            const value = this.todoDom.value;
            // 每次添加就发送
            PubSub.publish('SEND_INPUT', value)
            this.todoDom.value=''
        }

        render() {
            const {count} = this.state
            return (
                <div>
                    <input type="text" ref={input => this.todoDom = input} />
                    <button onClick={this.add} >ADD#{count}</button>
                </div>
            )
        }
    }

    Add.propTypes = {
        // count: PropTypes.number.isRequired,
        // addTodo: PropTypes.func.isRequired
    }

    class List extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                todos: ['ok', 'yes', 'good']
            }
        }

        componentDidMount() {
            // 一开始发送一次
            PubSub.publish('SEND_COUNT', this.state.todos.length)
            // 订阅收到的消息
            PubSub.subscribe('SEND_INPUT', (msg, data)  =>  {
                console.log(`List收到：${data}`)
                const {todos} = this.state
                todos.unshift(data)
                this.setState({todos})
                // 每次更新后再次发送一次
                PubSub.publish('SEND_COUNT', this.state.todos.length)
            })
        }

        render() {
            const {todos} = this.state
            return (
                <ul>
                    {
                        todos.map((todo, index) => <li key={index}>{todo}</li>)
                    }
                </ul>
            )
        }
    }
    // List.propTypes = {
    //     todos: PropTypes.array.isRequired
    // }
    ReactDOM.render(<App />, document.getElementById('app'))
</script>
</body>
</html>
